<!--
 * @Author: ShiJunJie
 * @Date: 2022-04-01 16:19:11
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-14 19:46:23
 * @Descripttion: 
-->

<template>
  <a-space>
    <a-button type="primary">primary</a-button>
    <a-button type="primary">
      <Icon icon="ph:user-duotone" />
    </a-button>
    <a-button type="dashed">text</a-button>
    <a-switch v-model:checked="checked" @change="change" checkedValue="theme-default" unCheckedValue="theme-green"></a-switch>
  </a-space>
  <div>
    <div @click="count++">{{ count }}</div>
    <div style="height: 100%; overflow: auto"></div>
  </div>

  <BaseTable :columns="columns" :dataSource="dataSource" :hidePage="false" :total="1000" />
</template>

<script setup lang="ts">
import { type ThemeType,useThemeStore } from '@/stores/theme';
import type { Ref } from 'vue';

const columns = ref([
  { title: 'name', key: 'name', width:200, fixed: 'left', dataIndex: 'name' },
  { title: 'value', key: 'value', dataIndex: 'value' },
  { title: 'value2', key: 'value2', dataIndex: 'value2' },
  { title: 'value3', key: 'value3', dataIndex: 'value3' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    funs: [
      { label: '修改', fun: (e: any) => console.log(e) },
      { label: '删除', fun: (e: any) => console.log(e) },
      ]
  }
])
const dataSource = ref()
onMounted(() => {
  setTimeout(() => {

    dataSource.value = [{}, {}, {}, {}, {}, {}, {}, {}]
  }, 300);
})

const count = ref(0);
const Theme = useThemeStore();
console.log('Theme.theme',Theme.theme);
const checked : Ref<ThemeType> = ref(Theme.theme);
const change = (value : any) => Theme.set(value);
</script>

<route lang="yml">
name: idididididi
</route>

<style scoped lang="scss">
a {
  color: #fff;
}
</style>
